<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <style>
        #app {
            border: dashed black 1px;
            display: inline-block;
            padding-bottom: 10px;
        }

        #app>button {
            display: block;
            margin: auto;
        }

        #lightDiv {
            position: relative;
            width: 150px;
            height: 150px;
        }

        #lightDiv>img {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #lightDiv>div {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- 指令是带有 v- 前缀的特殊属性。
            指令用于在表达式的值改变时，将某些行为应用到 DOM 上 -->
    <div id="app" class="demo">
        <!-- v-model :用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。 -->
        <input type="text" v-model="message">
        <p>{{ message }}</p>

        <hr>
        <!-- v-bind	用于将 Vue 实例的数据绑定到 HTML 元素的属性上。 -->
        <img v-bind:src="imageSrc">

        <hr>
        <!-- v-if: 用于根据表达式的值来条件性地渲染元素或组件。 -->
        <p v-if="showMessage">Hello Vue!</p>
        <p v-else>Goodbye Vue!</p>

        <hr>
        <!-- v-for: 用于根据数组或对象的属性值来循环渲染元素或组件。 -->
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.text }}
            </li>
        </ul>

        <hr>
        <!-- v-on	用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。 -->
        <div id="lightDiv">
            <div v-show="lightOn"></div>
            <img src="https://static.runoob.com/images/svg/img_lightBulb.svg">
        </div>
        <button v-on:click=" lightOn = !lightOn ">开/关</button>

        <hr>
        <!-- v-show: 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。 -->
        <button v-on:click="showMessage = !showMessage">显示/隐藏</button>
        <p v-show="showMessage">Hello Vue!</p>
    </div>


    <script>
        const HelloVueApp = {
            data() {
                return {
                    message: 'Hello Vue!!',
                    imageSrc: 'https://static.runoob.com/images/code-icon-script.png',
                    showMessage: false,
                    items: [
                        { id: 1, text: 'Item 1' },
                        { id: 2, text: 'Item 2' },
                        { id: 3, text: 'Item 3' }
                    ],
                    lightOn: false
                }
            }
        }

        Vue.createApp(HelloVueApp).mount('#app')
    </script>
</body>

</html>